import React, { Component } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import Index from '../components/Index'
import Http from '../components/Http'
import Redux from '../components/Redux'
import Redux2 from '../components/Redux2.jsx'
import StateClass from '../components/StateClass'
import StateFn from '../components/StateFn'
import EffectClass from '../components/EffectClass'
import EffectFn from '../components/EffectFn'
import ReudcerFn from '../components/ReudcerFn'
import AFn from '../components/AFn'
import From from '../components/From'
// 路由表，数组
const routes = [
  {path: '/', exact: true, component: Index, login: false, meta:{title: '首页'}},
  {path: '/http', exact: true, component: Http, login: true, meta:{title: 'http'}},
  {path: '/redux', exact: true, component: Redux, login: true, meta:{title: 'redux'}},
  {path: '/redux2', exact: true, component: Redux2, login: true, meta:{title: 'redux'}},
  {path: '/stateclass', exact: true, component: StateClass, login: true, meta:{title: 'state'}},
  {path: '/statefn', exact: true, component: StateFn, login: true, meta:{title: 'state'}},
  {path: '/effectclass', exact: true, component: EffectClass, login: false, meta:{title: 'effect'}},
  {path: '/reudcerfn', exact: true, component: ReudcerFn, login: false, meta:{title: 'reudcer'}},
  {path: '/from', exact: true, component: From, login: false, meta:{title: '登录'}},
  {path: '/afn', exact: true, component: AFn, login: false, meta:{title: '父组件'}}
]
export default class Router extends Component {
  render() {
    return (
      <>
        <Switch>
          {
            routes.map((item, index)=>{
              return (
                <Route
                  key={index}
                  path={item.path}
                  exact={item.exact}
                  render={()=>{
                    document.title = item.meta.title || 'react'
                    // 判断页面是否需要登录
                    if(item.login) {
                      // 判断用户是否登录
                      if(localStorage.getItem('login')) {
                        let C = item.component
                        return <C></C>
                      }else {
                        // 页码需要登录，用户没有登录
                        return <Redirect to="/from"></Redirect>
                      }
                    }else {
                      let C = item.component
                      return <C></C>
                    }
                  }}
                ></Route>
              )
            })
          }
          {/* <Route path="/" exact component={Index}></Route>
          <Route path="/http" exact component={Http}></Route>
          <Route path="/redux" exact component={Redux}></Route>
          <Route path="/redux2" exact component={Redux2}></Route>
          <Route path="/stateclass" exact component={StateClass}></Route>
          <Route path="/statefn" exact component={StateFn}></Route>
          <Route path="/effectclass" exact component={EffectClass}></Route>
          <Route path="/effectfn" exact component={EffectFn}></Route>
          <Route path="/reudcerfn" exact component={ReudcerFn}></Route>
          <Route path="/from" exact component={From}></Route>
          <Route path="/afn" exact component={AFn}></Route> */}
        </Switch>
      </>
    )
  }
}
